import React from 'react';
import './check.scss';
import {observable, observer, action, toJS} from 'mobx.collection';
import {Link} from "react-router-dom";
import ImageLoadable from "components/plugins/imageLoading/imageLoading";
import {RouterList} from "@/routers/router-list";
import {DictController} from "api/dict";
import {PageStore} from "storage";
import {notify} from "components/state/toast";

@observer
class ColumnMessageItem extends React.Component {
    @observable PostCategoryList = [];

    @action
    async componentDidMount() {

        if (PageStore.has('ColumnMessageItemCategoryListResult')) {
            this.PostCategoryList = PageStore.get('ColumnMessageItemCategoryListResult');
        } else {
            let {DATA, STATUS, DETAILS, MESSAGE} = await DictController.GetPostCategoryList();
            if (STATUS === 0) {
                PageStore.set('ColumnMessageItemCategoryListResult', [...DATA]);
                this.PostCategoryList.push(...DATA);
            } else {
                notify(DETAILS || MESSAGE);
            }
        }
    }


    render() {
        let {
            item = {}
        } = this.props;
        let {
            Id,
            Title,
            IsSuggest,
            //如果是字典就要自己去读
            Category,
            ReadCount,
            Cover,
            To = RouterList.info.message(Id),
        } = item;

        console.log(toJS(this.PostCategoryList), Category);
        let CategoryName = this.PostCategoryList.find(x => x.Id === Category)?.Name;

        return (
            <Link to={To} className={"--column-message-item -message-item"}>
                <div className="info">
                    <div className="title">
                        <span className={"font-size-32"}>{Title}&nbsp;&nbsp;</span>
                        {
                            IsSuggest ? <span className={"advise font-size-18"}>推荐</span>
                                : <></>
                        }
                    </div>
                    {this.props.textChildren}
                    <div className="category">
                        <span className={"font-size-24"}>{CategoryName}</span>
                        <span className={"font-size-24"}>{ReadCount}人阅读</span>
                    </div>
                </div>
                <ImageLoadable className={"-img"} src={Cover}/>
            </Link>
        );
    }
}

class ColumnExpertMessageItem extends React.Component {
    render() {
        let {
            item = {}
        } = this.props;

        let childItem = {
            ...item,
            Title: item.PostTitle,
            To: item.To || RouterList.article.state(item.Id),
            Cover: item.Image
        };

        return (
            <ColumnMessageItem {...this.props} item={childItem}/>
        )
    }
}

//todo: 专家详情的TA的文章
@observer
class InfoMessageItem extends React.Component {
    render() {
        let {
            item = {}
        } = this.props;
        let {
            to,
            image
        } = item;

        return (
            <Link to={to} className={"--info-message-item -message-item"}>
                <div className="info">
                    <div className="title">
                        <span className={"font-size-32"}>{"特色小镇的5种死法！活下去的秘诀是什么？"}</span>
                        <span className={"advise font-size-18"}>推荐</span>
                    </div>
                    <div className="category">
                        <span className={"font-size-24"}>特色小镇</span>
                        <span className={"font-size-24"}>58人阅读</span>
                    </div>
                </div>
                {
                    image ?
                        <ImageLoadable className={"-img"} src={image}/>
                        : null
                }
            </Link>
        );
    }
}

export {
    ColumnMessageItem,
    InfoMessageItem,
    ColumnExpertMessageItem,
};